<template>
  <div class="header">
    <div class="collapse-btn" @click="collapseChange">
      <i class="el-icon-menu"></i>
    </div>
    <div class="logo">blog后台管理系统</div>
    <div class="header-right">
      <div class="btn-fullscreen" @click="handleFullScreen">
        <el-tooltip
          :content="fullscreen ? `取消全屏` : `全屏`"
          placement="bottom"
        >
          <i class="el-icon-rank"></i>
        </el-tooltip>
      </div>
      <div class="user-avator">
        <img :src="img" />
      </div>
      <el-dropdown class="user-name" trigger="click" @command="handleCommand">
        <span class="el-dropdown-link">
          {{ username }}
          <i class="el-icon-caret-bottom"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="img">更新头像</el-dropdown-item>
          <el-dropdown-item command="update">修改密码</el-dropdown-item>
          <el-dropdown-item command="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <el-dialog
      style="width: 800px; margin-left: 30%"
      title="修改密码"
      :visible.sync="dialogFormVisible4Edit"
    >
      <el-form :model="formData" :rules="rules" ref="from">
        <el-form-item label="原密码" prop="oldPwd">
          <el-input
            type="password"
            v-model="formData.oldPwd"
            placeholder="请输入原密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPwd">
          <el-input
            type="password"
            v-model="formData.newPwd"
            placeholder="请输入新密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="newPwd1">
          <el-input
            type="password"
            v-model="formData.newPwd1"
            placeholder="请输入确认密码"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible4Edit = false">取 消</el-button>
        <el-button type="primary" @click="handleEdit()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      style="width: 800px; margin-left: 30%"
      title="更新头像"
      :visible.sync="dialogFormVisibleEdit"
    >
      <el-upload
        class="avatar-uploader"
        :headers="headers"
        :action="url"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <i class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-dialog>
  </div>
</template>

<script>
import bus from "../assets/js/bus";
export default {
  data() {
    return {
      img:
        "http://localhost:8081/blog" +
        JSON.parse(sessionStorage.getItem("user")).img,
      url:
        "http://localhost:8081/blog/admin/pic/" +
        JSON.parse(sessionStorage.getItem("user")).id,
      collapse: false,
      fullscreen: false,
      dialogFormVisible4Edit: false,
      dialogFormVisibleEdit: false,
      formData: {
        id: "",
        oldPwd: "",
        newPwd: "",
        newPwd1: "",
      },
      rules: {
        oldPwd: [
          { required: true, message: "请输入原密码", trigger: "blur" },
          {
            min: 2,
            max: 30,
            message: "长度在 2 到 30 个字符",
            trigger: "blur",
          },
        ],
        newPwd: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          {
            min: 2,
            max: 30,
            message: "长度在 2 到 30 个字符",
            trigger: "blur",
          },
        ],
        newPwd1: [
          { required: true, message: "请输入确认密码", trigger: "blur" },
          {
            min: 2,
            max: 30,
            message: "长度在 2 到 30 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {
    username() {
      var user = JSON.parse(sessionStorage.getItem("user"));
      return user.username;
    },
    headers() {
      return { Authorization: sessionStorage.getItem("tokenStr") };
    },
  },
  methods: {
    errorHandler() {
      return true;
    },
    handleEdit() {
      this.$refs["from"].validate((valid) => {
        if (valid) {
          if (this.formData.newPwd == this.formData.newPwd1) {
            this.$put("admin/pwd", this.formData).then((res) => {
              if (res.code == 200) {
                this.dialogFormVisible4Edit = false;
              }
            });
          } else {
            this.$message.error("两次密码输入不一致，请检查!");
          }
        } else {
          this.$message.error("数据校验失败，请检查!");
        }
      });
    },
    getUrl() {
      var user = JSON.parse(sessionStorage.getItem("user"));
      this.img = "http://localhost:8081/blog" + user.img;
    },
    //侧边栏折叠
    collapseChange() {
      this.collapse = !this.collapse;
      bus.$emit("collapse", this.collapse);
    },
    //全屏事件
    handleFullScreen() {
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          //safari 、Chrome
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          //firefox
          document.mozCancelFullScreen();
        } else if (document.msExitFullScreen) {
          //ie
          document.msExitFullScreen();
        }
      } else {
        let element = document.documentElement;
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          //safari 、Chrome
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          //firefox
          element.mozRequestFullScreen();
        } else if (element.msRequestFullScreen) {
          //ie
          element.msRequestFullScreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    },
    handleCommand(command) {
      if (command == "logout") {
        this.$confirm("您确定要退出吗？", "提示", {
          type: "warning",
        }).then(() => {
          sessionStorage.removeItem("user");
          sessionStorage.removeItem("tokenStr");
          this.$message.success("注销成功");
          setTimeout(this.$router.replace("/"), 2000);
        });
      } else if (command == "update") {
        this.formData = { id: JSON.parse(sessionStorage.getItem("user")).id };
        this.dialogFormVisible4Edit = true;
      } else if (command == "img") {
        this.dialogFormVisibleEdit = true;
      }
    },
    beforeAvatarUpload(file) {
      var testMsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      if (testMsg != "jpg" && testMsg != "jpeg" && testMsg != "png") {
        this.$message({
          message: "上传文件只能是jpg、jpeg、png格式",
          type: "error",
        });
        return false;
      }
      return true;
    },
    handleAvatarSuccess(res) {
      if (res.code == 200) {
        this.$get("admin/detail").then((res) => {
          if (res) {
            sessionStorage.setItem("user", JSON.stringify(res));
          }
        });
        this.dialogFormVisibleEdit = false;
        this.$message.success(res.message);
      } else {
        this.$message.error(res.message);
      }
    },
  },
};
</script>

<style scoped>
.header {
  position: absolute;
  background-color: #03b4a7;
  box-sizing: border-box;
  width: 100%;
  left: 0;
  top: 0;
  height: 70px;
  font-size: 22px;
  color: #ffffff;
}

.collapse-btn {
  float: left;
  padding: 0 21px;
  cursor: pointer;
  line-height: 70px;
}

.header .logo {
  float: left;
  line-height: 70px;
}

.header-right {
  float: right;
  padding-right: 50px;
  display: flex;
  height: 70px;
  align-items: center;
}

.btn-fullscreen {
  transform: rotate(45deg);
  margin-right: 5px;
  font-size: 24px;
}

.user-avator {
  margin-left: 20px;
}

.user-avator img {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.user-name {
  margin-left: 10px;
}

.el-dropdown-link {
  color: #ffffff;
  cursor: pointer;
}
</style>